﻿@model int
@{
    ViewBag.Title = "Create";
}

<form id="updateDriver" action="@Url.Action("AddImageForProduct")" method="POST"  enctype="multipart/form-data" style="background-color: red; height: 430px; width: 286px;">
    
    @Html.CheckBox("isDefault",
                   new
                       {
                               @style = "float: left; margin: 5px 5px 0 0;"
                       })<span style="float: left; margin: 3px 30px 0 5px;">Ảnh chính</span> 
    <input id=" " name="files"  type="file"  style="float: left; height: 25px; width: 75px;" name="files"  />
    <input type="hidden" name="productId"  value="@Model"/>
    
    <button type="submit" style="float: right;" >
        Update
    </button>
    <div style="background-color: #f7f7f7; padding: 5px; width: 287px;">
        <div id="photoResult"  style="height: 420px; width: 277px;">
            <div style="background-color: white; height: 420px; width: 277px;"></div>
        </div>
    </div>
</form>


<script type="text/javascript">
    $(document).ready(function() {
        document.getElementById('files').addEventListener('change', handleFileSelect, false);

        function handleFileSelect(evt) {
            var files = evt.target.files;
            for (var i = 0, f; f = files[i]; i++) {
                if (!f.type.match('image.*'))
                    continue;
                var reader = new FileReader();
                reader.onload = (function(theFile) {
                    return function(e) {
                        if (e.total < 3221225472)
                            document.getElementById('photoResult').innerHTML = ['<img  src="', e.target.result,
                                '" title="', escape(theFile.name), '" style="width:277px;"/>'].join('');
                        else
                            alert("File upload < 3MB");
                    };
                })(f);
                reader.readAsDataURL(f);
            }
        }
    });
</script>